<template>
  <div class="app-container">
    <!-- 页面标题 -->
    <div class="page-header-container">
      <div class="page-header-title">
        <h3>Prompt管理</h3>
        <p class="page-subtitle">管理和优化AI的提示词</p>
      </div>
      <div class="page-header-action">
        <el-button type="default" @click="handleImport" class="import-btn">
          <template #icon><Upload /></template>
          导入
        </el-button>
        <el-button type="default" @click="handleExport" class="export-btn">
          <template #icon><Download /></template>
          导出
        </el-button>
        <el-button type="primary" @click="handleAdd" class="add-btn">
          <template #icon><Plus /></template>
          新增Prompt
        </el-button>
      </div>
    </div>

    <!-- 搜索筛选区域 -->
    <div class="search-filter-container">
      <div class="filter-row">
        <el-form :inline="true" :model="searchForm" class="filter-form">
          <el-form-item label="Prompt类型" >
            <el-select v-model="searchForm.type" placeholder="全部类型" clearable style="width: 200px;">
               <el-option label="全部类型" value=""></el-option>
          <el-option label="教师工作助手" value="教师工作助手"></el-option>
          <el-option label="家园沟通助手" value="家园沟通助手"></el-option>
          <el-option label="活动策划助手" value="活动策划助手"></el-option>
          <el-option label="园所管理智能体" value="园所管理智能体"></el-option>
            </el-select>
          </el-form-item>
          
          <el-form-item label="状态" >
            <el-select v-model="searchForm.status" placeholder="全部状态" clearable style="width: 100px;">
              <el-option label="全部状态" value=""></el-option>
              <el-option label="启用" value="启用"></el-option>
              <el-option label="禁用" value="禁用"></el-option>
            </el-select>
          </el-form-item>
          
          <el-form-item label="创建日期">
            <el-date-picker
              v-model="searchForm.dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="YYYY/MM/DD"
              style="width: 240px;"
              popper-class="date-picker-popper"
            />
          </el-form-item>
          
          <el-form-item>
            <el-button type="primary" @click="handleSearch">
              <template #icon><Search /></template>
              筛选
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <!-- 表格展示区域 -->
    <div class="table-container">
      <el-table 
        :data="filteredPrompts" 
        style="width: 100%"
        stripe
        border
        v-loading="loading"
      >
        <el-table-column type="index" label="序号" width="80" align="center" />
        
        <el-table-column prop="name" label="名称" min-width="200">
          <template #default="scope">
            <div class="prompt-name">
              <el-tooltip :content="scope.row.name" placement="top" :disabled="scope.row.name.length < 15">
                <span>{{ scope.row.name }}</span>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
        
        <el-table-column prop="type" label="类型" width="120" align="center">
          <template #default="scope">
            <el-tag :type="getTypeTagType(scope.row.type)" effect="plain">
              {{ scope.row.type }}
            </el-tag>
          </template>
        </el-table-column>
        
        <el-table-column prop="createTime" label="创建时间" width="150" align="center" sortable>
          <template #default="scope">
            <div>{{ scope.row.createTime }}</div>
          </template>
        </el-table-column>
        
        <el-table-column prop="useCount" label="使用次数" width="100" align="center" sortable>
          <template #default="scope">
            <div>{{ scope.row.useCount }}</div>
          </template>
        </el-table-column>
        
        <el-table-column prop="status" label="状态" width="80" align="center">
          <template #default="scope">
            <el-tag :type="scope.row.status === '启用' ? 'success' : 'danger'" effect="plain">
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
        
        <el-table-column label="操作" width="250" fixed="right" align="center">
          <template #default="scope">
            <div class="action-buttons">
              <el-tooltip content="编辑" placement="top">
                <el-button type="text" size="small" @click="handleEdit(scope.row)">
                  <template #icon><EditPen /></template>
                </el-button>
              </el-tooltip>
              <el-tooltip content="复制" placement="top">
                <el-button type="text" size="small" @click="handleCopy(scope.row)">
                  <template #icon><CopyDocument /></template>
                </el-button>
              </el-tooltip>
              <el-tooltip content="测试" placement="top">
                <el-button type="text" size="small" @click="handleTest(scope.row)">
                  <template #icon><SwitchButton /></template>
                </el-button>
              </el-tooltip>
              <el-tooltip :content="scope.row.status === '启用' ? '禁用' : '启用'" placement="top">
                  <el-button 
                    type="text" 
                    size="small" 
                    :type="scope.row.status === '启用' ? 'warning' : 'success'"
                    @click="handleToggleStatus(scope.row)"
                  >
                    <template #icon>
                      <component :is="scope.row.status === '启用' ? SwitchButton : Check" />
                    </template>
                  </el-button>
                </el-tooltip>
              <el-tooltip content="删除" placement="top">
                <el-button type="text" size="small" danger @click="handleDelete(scope.row)">
                  <template #icon><Delete /></template>
                </el-button>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页组件 -->
      <div class="pagination-container" v-if="filteredPrompts.length > 0">
        <div class="pagination-info">
      
        </div>
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"  
          :page-sizes="[5, 10, 20, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="4"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          class="pagination"
          background
          small
        />
      </div>
      
      <!-- 空状态 -->
      <div class="empty-state" v-else>
        <el-empty description="暂无数据" :image-size="120">
          <template #description>
            <span>没有找到符合条件的Prompt模板</span>
          </template>
          <el-button type="primary" @click="resetSearch">重置筛选</el-button>
        </el-empty>
      </div>
    </div>

    <!-- 编辑对话框 -->
    <el-dialog
      v-model="editDialogVisible"
      title="编辑Prompt"
      width="60%"
      :before-close="handleCloseEditDialog"
      class="edit-dialog"
    >
      <el-form :model="editForm" label-width="120px">
        <el-form-item label="名称">
          <el-input v-model="editForm.name" placeholder="请输入Prompt名称" />
        </el-form-item>
        <el-form-item label="类型">
          <el-select v-model="editForm.type" placeholder="请选择类型" style="width: 100%">
            <el-option label="教师工作助手" value="教师工作助手" />
            <el-option label="家园沟通助手" value="家园沟通助手" />
            <el-option label="活动策划助手" value="活动策划助手" />
            <el-option label="园所管理智能体" value="园所管理智能体" />
          </el-select>
        </el-form-item>
        <el-form-item label="内容">
          <el-input
            v-model="editForm.content"
            type="textarea"
            :rows="15"
            placeholder="请输入Prompt内容"
          />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="editForm.status" placeholder="请选择状态" style="width: 100%">
            <el-option label="启用" value="启用" />
            <el-option label="禁用" value="禁用" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleCloseEditDialog">取消</el-button>
          <el-button type="primary" @click="handleSaveEdit">保存</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { 
  Search, 
  EditPen, 
  Document,
  CopyDocument, 
  SwitchButton, 
  Check, 
  Delete,
  Upload,
  Download,
  Plus
} from '@element-plus/icons-vue'

// 状态管理
const loading = ref(false)
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(13) // 更新总数，新增了一个Prompt
const searchForm = ref({
  type: '',
  status: '',
  dateRange: null
})

// 编辑对话框状态
const editDialogVisible = ref(false)
const editForm = ref({
  id: 0,
  name: '',
  type: '',
  content: '',
  status: ''
})

// 格式化日期为 YYYY/MM/DD 格式
const formatDate = (date) => {
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  return `${year}/${month}/${day}`
}

// 模拟数据
const promptsData = ref([
  {
    id: 0,
    name: '幼儿园安全督导员',
    type: '园所管理智能体',
    createTime: '2023/12/01',
    useCount: 0,
    status: '启用',
    description: '幼儿园安全督导员，负责保障幼儿在园期间的安全，严格遵循安全规范开展工作'
  },
  {
    id: 1,
    name: '教学计划生成助手',
    type: '教师工作助手',
    createTime: '2023/11/15',
    useCount: 128,
    status: '启用',
    description: '帮助教师快速生成周计划和月计划'
  },
  {
    id: 2,
    name: '家长通知自动生成',
    type: '家园沟通助手',
    createTime: '2023/11/10',
    useCount: 95,
    status: '启用',
    description: '一键生成家长会、活动通知等内容'
  },
  {
    id: 3,
    name: '六一儿童节活动方案',
    type: '活动策划助手',
    createTime: '2023/11/05',
    useCount: 210,
    status: '启用',
    description: '提供节日活动策划方案和执行流程'
  },
  {
    id: 4,
    name: '园所信息管理助手',
    type: '园所管理智能体',
    createTime: '2023/10/28',
    useCount: 342,
    status: '禁用',
    description: '协助管理园所日常事务和信息统计'
  },
  {
    id: 5,
    name: '幼儿成长记录助手',
    type: '教师工作助手',
    createTime: '2023/10/20',
    useCount: 156,
    status: '启用',
    description: '智能记录幼儿日常表现和成长轨迹'
  },
  {
    id: 6,
    name: '育儿知识推送助手',
    type: '家园沟通助手',
    createTime: '2023/10/15',
    useCount: 189,
    status: '启用',
    description: '定期推送科学育儿知识和家庭教育建议'
  }
])

// 计算属性
const filteredPrompts = computed(() => {
  let filtered = [...promptsData.value]
  
  // 筛选逻辑
  if (searchForm.value.type) {
    filtered = filtered.filter(item => item.type === searchForm.value.type)
  }
  if (searchForm.value.status) {
    filtered = filtered.filter(item => item.status === searchForm.value.status)
  }
  if (searchForm.value.dateRange && searchForm.value.dateRange.length === 2) {
    filtered = filtered.filter(item => {
      const itemDate = new Date(item.createTime)
      const startDate = new Date(searchForm.value.dateRange[0])
      const endDate = new Date(searchForm.value.dateRange[1])
      return itemDate >= startDate && itemDate <= endDate
    })
  }
  
  // 分页逻辑
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return filtered.slice(start, end)
})

const startIndex = computed(() => {
  if (filteredPrompts.value.length === 0) return 0
  return (currentPage.value - 1) * pageSize.value + 1
})

const endIndex = computed(() => {
  return Math.min(currentPage.value * pageSize.value, total.value)
})

// 方法
const getTypeTagType = (type) => {
  const typeMap = {
    '教师工作助手': 'primary',
    '家园沟通助手': 'success',
    '活动策划助手': 'warning',
    '园所管理智能体': 'info'
  }
  return typeMap[type] || 'default'
}

const handleSearch = () => {
  currentPage.value = 1
  // 这里可以添加搜索逻辑，更新total等
  ElMessage.success('搜索成功')
}

const resetSearch = () => {
  searchForm.value = {
    type: '',
    status: '',
    dateRange: null
  }
  currentPage.value = 1
  handleSearch()
}

const handleSizeChange = (size) => {
  pageSize.value = size
  currentPage.value = 1
}

const handleCurrentChange = (current) => {
  currentPage.value = current
}

const handleImport = () => {
  ElMessage.info('导入功能待实现')
}

const handleExport = () => {
  ElMessage.info('导出功能待实现')
}

const handleAdd = () => {
  ElMessage.info('新增功能待实现')
}

const handleEdit = (row) => {
  // 获取当前日期并格式化为YYYY年MM月DD日格式
  const formatDate = (date) => {
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    return `${year}年${month}月${day}日`;
  };
  
  // 获取当前日期
  const currentDate = formatDate(new Date());
  
  // 设置编辑表单数据
  editForm.value = {
    ...row,
    // 为幼儿园安全督导员设置默认的详细内容，包含动态日期
    content: row.id === 0 ? `你现在的身份是幼儿园安全督导员，今天是${currentDate}，核心职责是保障幼儿在园期间的人身安全、环境安全及活动安全，严格遵循《幼儿园安全规范》《未成年人保护法》相关要求开展工作，生成任何方案（活动方案、设施使用方案、流程优化方案等）必须通过 "安全三审"，未满足三审要求的方案不得落地。
 核心工作准则
 安全三审强制要求
 审场地安全性：核查场地（教室、户外、食堂等）是否符合安全标准，包括地面防滑、护栏高度、无尖锐棱角、消防通道畅通、无有毒有害物品等，明确排除场地相关安全隐患。
 审幼儿适配性：结合幼儿年龄（3-6 岁）生理心理特点，判断方案中活动强度、设施尺寸、操作难度、接触物品等是否适配，避免超出幼儿承受范围的安全风险。
 审应急准备完整性：确认方案包含针对性应急措施，如应急联系人、急救物资（创可贴、消毒液等）、突发事件处置流程（磕碰、走失、火灾等），确保应急响应闭环。
 语言风格：专业严谨且通俗易懂，对教职工 / 家长沟通时温和耐心，提整改要求时明确具体；避免专业术语堆砌，确保相关方快速理解执行。
 响应逻辑：先核查方案是否通过 "安全三审"，标注未达标项；再明确安全风险等级（低 / 中 / 高），给出可落地的整改措施、责任主体及完成时限；涉及紧急安全问题，优先给出即时处置方案。
 边界限定：仅围绕幼儿园安全相关工作提供指导、排查建议、整改方案，不涉及教学内容设计、幼儿教育理念等非安全类事务。
 常用应用场景
 方案安全审核：对幼儿园各类方案进行 "安全三审"，输出审核结果及整改建议。
 安全隐患排查：针对幼儿园特定区域 / 环节，列出排查要点及判断标准。
 整改方案制定：根据 "安全三审" 未达标项，输出具体可操作的整改步骤。
 安全沟通话术：面向教职工、家长、幼儿的不同安全场景沟通模板。
 安全制度解读：对幼儿园安全相关制度、规范进行通俗化解释及执行指引。` : ''
  }
  // 显示编辑对话框
  editDialogVisible.value = true
}

// 关闭编辑对话框
const handleCloseEditDialog = () => {
  editDialogVisible.value = false
  // 重置编辑表单
  editForm.value = {
    id: 0,
    name: '',
    type: '',
    content: '',
    status: ''
  }
}

// 保存编辑内容
const handleSaveEdit = () => {
  // 这里可以添加保存逻辑
  ElMessage.success('保存成功')
  editDialogVisible.value = false
}

const handleCopy = (row) => {
  ElMessage.success('复制成功')
}

const handleTest = (row) => {
  ElMessage.info(`测试ID为${row.id}的Prompt`)
}

const handleToggleStatus = (row) => {
  const newStatus = row.status === '启用' ? '禁用' : '启用'
  ElMessageBox.confirm(
    `确定要${newStatus}该Prompt吗？`,
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    row.status = newStatus
    ElMessage.success(`${newStatus}成功`)
  }).catch(() => {
    ElMessage.info('已取消操作')
  })
}

const handleDelete = (row) => {
  ElMessageBox.confirm(
    '确定要删除该Prompt吗？此操作不可撤销！',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'error'
    }
  ).then(() => {
    // 这里可以添加删除逻辑
    ElMessage.success('删除成功')
  }).catch(() => {
    ElMessage.info('已取消删除')
  })
}

// 在组件挂载时更新幼儿园安全督导员的创建时间为当前日期
onMounted(() => {
  const today = new Date()
  const todayStr = formatDate(today)
  
  // 找到id为0的幼儿园安全督导员并更新其创建时间
  const safetySupervisor = promptsData.value.find(item => item.id === 0)
  if (safetySupervisor) {
    safetySupervisor.createTime = todayStr
  }
})
</script>

<style scoped lang="scss">
.app-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.page-header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding: 24px;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;

  &:hover {
    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.12);
  }

  .page-header-title h3 {
    margin: 0 0 8px 0;
    color: #2c3e50;
    font-size: 24px;
    font-weight: 600;
  }

  .page-subtitle {
    margin: 0;
    color: #8c8c8c;
    font-size: 14px;
  }

  .page-header-action {
    display: flex;
    gap: 12px;
  }

  .el-button {
    transition: all 0.3s ease;
    border-radius: 6px;
    font-size: 14px;
    padding: 8px 16px;
  }

  .el-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  }

  .add-btn {
    background-color: #409eff;
    border-color: #409eff;
  }

  .add-btn:hover {
    background-color: #66b1ff;
    border-color: #66b1ff;
  }
}

.search-filter-container {
  margin-bottom: 24px;
  padding: 24px;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;

  &:hover {
    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.12);
  }
}

.filter-form {
  width: 100%;
}

.filter-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.el-form-item {
  margin-bottom: 0;
}

.el-select,
.el-date-picker {
  transition: all 0.3s ease;
  border-radius: 6px;
}

.el-select:hover .el-input__wrapper,
.el-date-picker:hover .el-input__wrapper {
  border-color: #c6e2ff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
}

.el-select:focus .el-input__wrapper,
.el-date-picker:focus .el-input__wrapper {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

.table-container {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
  padding: 24px;
  transition: all 0.3s ease;

  &:hover {
    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.12);
  }
}

.el-table {
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;

  .el-table__header-wrapper {
    .el-table__header {
      th {
        background-color: #f5f7fa;
        color: #2c3e50;
        font-weight: 600;
        text-align: center;
        border-bottom: 2px solid #ebeef5;
        padding: 12px 0;

        &.is-leaf {
          border-bottom: 2px solid #ebeef5;
        }
      }
    }
  }

  .el-table__body-wrapper {
    .el-table__row {
      transition: all 0.3s ease;
      cursor: pointer;

      &:hover {
        background-color: #fafafa;
      }

      td {
        padding: 12px 0;
        text-align: center;
        border-bottom: 1px solid #ebeef5;
        transition: all 0.3s ease;

        &:last-child {
          padding-right: 12px;
        }
      }
    }
  }
}

.prompt-name {
  font-weight: 500;
  color: #2c3e50;
  transition: color 0.3s ease;
  
  &:hover {
    color: #409eff;
  }
}

.el-tag {
  transition: all 0.3s ease;
  border-radius: 4px;
  font-size: 12px;
  padding: 2px 8px;
}

.action-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 0;
  flex-wrap: wrap;
}

.action-buttons .el-button {
  margin: 0;
  padding: 4px;
  min-width: 32px;
  height: 32px;
  border-radius: 4px;
  transition: all 0.3s ease;
  background: transparent;
  border: none;
  color: #606266;

  &:hover {
    background-color: #f0f9ff;
    color: #409eff;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
  }

  &.danger {
    &:hover {
      background-color: #fef0f0;
      color: #f56c6c;
      box-shadow: 0 2px 8px rgba(245, 108, 108, 0.2);
    }
  }
}

.edit-dialog {
  .el-dialog {
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    
    .el-dialog__header {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      padding: 20px 24px;
      
      .el-dialog__title {
        font-size: 18px;
        font-weight: 600;
      }
      
      .el-dialog__headerbtn {
        top: 20px;
        right: 24px;
        
        .el-dialog__close {
          color: white;
          font-size: 20px;
          
          &:hover {
            background-color: rgba(255, 255, 255, 0.2);
          }
        }
      }
    }
    
    .el-dialog__body {
      padding: 24px;
    }
    
    .el-form {
      .el-form-item {
        margin-bottom: 24px;
        
        .el-form-item__label {
          font-weight: 500;
          color: #303133;
          font-size: 14px;
        }
        
        .el-input,
        .el-select,
        .el-textarea {
          .el-input__wrapper {
            border-radius: 8px;
            border-color: #dcdfe6;
            transition: all 0.3s ease;
            
            &:hover {
              border-color: #c6e2ff;
              box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
            }
            
            &.is-focus {
              border-color: #409eff;
              box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
            }
          }
        }
        
        .el-textarea {
          .el-textarea__inner {
            border-radius: 8px;
            font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
            font-size: 14px;
            line-height: 1.6;
            padding: 12px;
          }
        }
      }
    }
    
    .dialog-footer {
      display: flex;
      justify-content: flex-end;
      gap: 12px;
      padding: 16px 24px 24px;
      background-color: #fafafa;
      border-top: 1px solid #ebeef5;
      
      .el-button {
        padding: 8px 20px;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 500;
        transition: all 0.3s ease;
        
        &:first-child {
          background-color: #f4f4f5;
          border-color: #d9d9d9;
          color: #606266;
          
          &:hover {
            background-color: #e9e9eb;
            border-color: #c0c4cc;
          }
        }
        
        &.el-button--primary {
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          border: none;
          
          &:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
          }
        }
      }
    }
  }
}

.pagination-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #ebeef5;

  .pagination-info {
    color: #606266;
    font-size: 14px;
  }

  .el-pagination {
    .el-pager li {
      border-radius: 4px;
      transition: all 0.3s ease;

      &:hover {
        color: #409eff;
      }

      &.active {
        background-color: #409eff;
        color: #fff;
      }
    }
  }
}

.empty-state {
  padding: 60px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: #fafafa;
  border-radius: 8px;
  margin-top: 20px;

  .el-empty {
    .el-empty__image {
      margin-bottom: 24px;
    }

    .el-empty__description {
      color: #909399;
      font-size: 14px;
      margin-bottom: 20px;
    }
  }
}

/* 动画效果 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.page-header-container,
.search-filter-container,
.table-container,
.el-table__row {
  animation: fadeIn 0.5s ease-out;
}

/* 响应式设计优化 */
@media (max-width: 1200px) {
  .page-header-container,
  .search-filter-container,
  .table-container {
    padding: 20px;
  }
}

@media (max-width: 768px) {
  .app-container {
    padding: 16px;
  }

  .page-header-container {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
  }

  .page-header-title h3 {
    font-size: 20px;
  }

  .page-header-action {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .filter-row {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .el-select,
  .el-date-picker {
    width: 100%;
  }

  .table-container {
    padding: 16px;
    overflow-x: auto;
  }

  .el-table {
    min-width: 600px;
  }

  .pagination-container {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }

  .action-buttons {
    gap: 4px;
  }

  .action-buttons .el-button {
    min-width: 28px;
    height: 28px;
  }
}

@media (max-width: 480px) {
  .app-container {
    padding: 12px;
  }

  .page-header-container,
  .search-filter-container,
  .table-container {
    padding: 16px;
    border-radius: 8px;
  }

  .page-header-title h3 {
    font-size: 18px;
  }
}

/* 加载状态优化 */
.el-loading-mask {
  background-color: rgba(255, 255, 255, 0.8);

  .el-loading-spinner .path {
    stroke: #409eff;
  }
}
</style>